<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>自定义滚动条</title>
        <style>
            body{
                background: #cccccc;
            }
            #div1 {
                width: 300px;
                height: 20px;
                margin: auto;
                position: relative;
                background: #666666;
            }

            #div2 {
                width: 20px;
                height: 20px;
                position: absolute;
                background: red;
            }
            #div3{
                width: 300px;
                height: 300px;
                background: green;
                margin: auto;
                overflow: hidden;
                position: relative;
            }
            #div4{
                position: absolute;
                left: 0;
                top: 0;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2"></div>
        </div>
        <div id="div3">
            <div id="div4">
                start:::第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:
                第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:
                第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:
                第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:
                第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:
                第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:
                第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:
                第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:
                第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:
                第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:
                第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:第一部分:
                end::::
            </div>
        </div>
    </body>
    <script src="js/common.js"></script>
    <script>
        window.onload = function () {
            var div1 = document.getElementById("div1");
            var div2 = document.getElementById("div2");
            var div3 = document.getElementById("div3");
            var div4 = document.getElementById("div4");
            var disX = 0;
            div2.onmousedown = function (ev) {
                var oEvent = ev || event;
                var pos = getPosition(oEvent);
                disX = pos.x - div2.offsetLeft;

                if (div2.setCapture) {
                    //IE
                    div2.onmousemove = function (ev) {
                        mouseMove(ev);
                    };
                    div2.setCapture();
                    div2.onmouseup = mouseUp;
                } else {
                    document.onmousemove = function (ev) {
                        mouseMove(ev);
                    };
                    document.onmouseup = mouseUp;
                }
                //阻止默认事件
                return false;
            };

            function mouseUp() {
                console.log(this);
                if (this.onmousemove) {
                    this.onmousemove = null;
                    this.onmouseup = null;
                    if (this.releaseCapture) {
                        this.releaseCapture()
                    }
                }
            }

            function mouseMove(ev) {
                var oEvent = ev || event;
                var pos = getPosition(oEvent);
                var x = pos.x - disX;

                //让div不出去
                if (x < 0) {
                    //左边出不去
                    x = 0;
                } else if (x > div1.offsetWidth - div2.offsetWidth) {
                    //右出不去
                    x = div1.offsetWidth - div2.offsetWidth;
                }

                div2.style.left = x + "px";

                var scale = x / (div1.offsetWidth - div2.offsetWidth);
                document.title=scale;
                div4.style.top=-scale*(div4.offsetHeight-div3.offsetHeight)+"px";
            }
        }
    </script>
</html>